-        <span className="flex cursor-pointer gap-x-[4px] text-slate-500 hover:text-slate-700">
+        <button
+          type="button"
+          className="flex items-center gap-x-[4px] text-slate-500 hover:text-slate-700"
+          aria-label={`Information about ${label}`}
+        >
           {label}&nbsp;
           <InfoIcon className="h-6 w-6 stroke-slate-500 stroke-2 hover:stroke-slate-700" />
-        </span>
+        </button>

-    <div className="relative mt-2 flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#FF9966] to-[#FF8CA9]">
+    <div className="relative mt-2 flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--bullet-gradient-from,#FF9966)] to-[var(--bullet-gradient-to,#FF8CA9)]">

 const BulletedNumber: React.FC<BulletedNumberProps> = ({
   number,
   current = false,
 }) =>
   current ? (
     <div 
+      role="status"
+      aria-label={`Step ${number}${current ? ' (current step)' : ''}`}
       className="relative mt-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border border-black opacity-50">
       <span className="absolute inset-0 flex items-center justify-center">
         <span className="py-0.25 rounded-full bg-white px-0.5 text-sm leading-none text-black">
           {number}
         </span>
       </span>
     </div>
   ) : (
     <div 
+      role="status"
+      aria-label={`Step ${number}`}
       className="relative mt-2 flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#FF9966] to-[#FF8CA9]">

-<div className="gradient-border relative overflow-hidden">
-  <div className="absolute inset-0 bg-gradient-to-r from-[#FF9966] to-[#FF8CA9]"></div>
-  <div className="absolute inset-0 border-2 border-solid border-transparent"></div>
-  <div className="mb-1"></div>
-</div>
+<div className="h-1 w-full border-2 border-solid" style={{
+  borderImage: 'linear-gradient(to right, #FF9966, #FF8CA9) 1'
+}}></div>

+const isLoosingSide = (side: SideEnum, currentRuling: SideEnum) => {
+  return (side === SideEnum.claimer && currentRuling === SideEnum.challenger) ||
+         (side === SideEnum.challenger && currentRuling === SideEnum.claimer);
+};

 <SideFunding
   // ... other props
-  loosingSideHasEnd={
-    currentRulingFormatted === SideEnum.challenger
-      ? loosingSideHasEnd
-      : false
-  }
+  loosingSideHasEnd={isLoosingSide(SideEnum.claimer, currentRulingFormatted) && loosingSideHasEnd}
 />

-<div className="text-primaryText group relative flex py-[8px]">
+<div className="text-primaryText group relative flex py-[8px]"
+     role="button"
+     tabIndex={0}
+     onClick={() => setTooltipVisible(!tooltipVisible)}
+     onKeyPress={(e) => e.key === 'Enter' && setTooltipVisible(!tooltipVisible)}>
   <Image
     alt="warning"
     src="/logo/exclamation.svg"
     height={24}
     width={24}
   />
   &nbsp; Policy in force at submission
-  <div className="outline-color: #E5E5E5 bg-whiteBackground text-secondaryText invisible absolute left-1/2 z-10 m-4 mx-auto w-[260px] flex-shrink-0 -translate-x-1/2 transform place-content-center content-between rounded-[3px] border-[1px] border-[solid] bg-[var(--Light-Mode-White-background,_#FFF)] p-[8px] text-justify text-[14px] font-normal not-italic leading-[normal] outline-black transition-opacity ease-in-out [box-shadow:0px_2px_3px_0px_rgba(0,_0,_0,_0.06)] group-hover:visible md:w-[400px]">
+  <div className={`outline-color: #E5E5E5 bg-whiteBackground text-secondaryText absolute left-1/2 z-10 m-4 mx-auto w-[260px] flex-shrink-0 -translate-x-1/2 transform place-content-center content-between rounded-[3px] border-[1px] border-[solid] bg-[var(--Light-Mode-White-background,_#FFF)] p-[8px] text-[14px] font-normal not-italic leading-[normal] outline-black transition-opacity ease-in-out [box-shadow:0px_2px_3px_0px_rgba(0,_0,_0,_0.06)] md:w-[400px] ${tooltipVisible ? 'visible' : 'invisible'}`}
+       role="tooltip">
     <span>
-      This is the policy that was in effect when this submission was made. Why is this important? Policies may change over time, and it's crucial to know the policy that was in force at the time of a submission before challenging or removing a profile. If you challenge this submission, this version of the policy will be enforced by Kleros jurors if the case goes to arbitration. Also, if you revoke this profile citing "incorrect submission," but the submission complied with this policy, your revocation request may be rejected, and you may lose your deposit.
+      <p className="mb-2"><strong>Why is this important?</strong></p>
+      <p className="mb-2">This is the policy that was in effect when this submission was made. Policies may change over time, and it's crucial to know the applicable policy before challenging or removing a profile.</p>
+      <p className="mb-2">If you challenge this submission, this version of the policy will be enforced by Kleros jurors during arbitration.</p>
+      <p>Note: Revoking this profile for "incorrect submission" when it complied with this policy may result in rejection and deposit loss.</p>
     </span>
   </div>
 </div>